<template>
    <div class="relative flex flex-col flex-1 light-style">
        <div class="absolute left-0 right-0 flex items-center justify-between p-4 title-style z-9">
            <div>电影推荐平台</div>
            <div class="flex items-center">
                <el-button class="mr-4" @click="gotoIndex">首页</el-button>
                <!-- <el-button class="mr-4" @click="gotoCart">购物车</el-button> -->
                <el-button class="mr-4" @click="gotoOrder">我的电影</el-button>
                <el-icon size="40px" color="#ffffff" v-if="!userInfo.headUrl">
                    <Avatar />
                </el-icon>
                <el-image v-else style="width: 40px; height: 40px; border-radius: 20px;" :src="userInfo.headUrl"
                    fit="cover" />
                <el-dropdown @command="handleCommand">
                    <span class="flex text-[20px] text-[#999999] cursor-pointer">
                        <span class="pl-[12px] pr-[16px]">{{ userInfo?.username }}</span>
                        <el-icon class="cursor-pointer" size="22px" color="#999999">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu class="w-[224px] flex text-[#606266] flex-col items-center">
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
import { logout } from '@/apis/system'
import { getUserInfo } from '@/utils/store'
import { useRoute, useRouter } from 'vue-router'
import { Avatar } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
const route = useRoute()
const router = useRouter()
const userInfo = getUserInfo()
const handleCommand = (command: string | number | object) => {
    if (command === 'password') {
        // showPasswordDialog()
    } else if (command === 'logout') {
        handleLogout()
    }
}
const handleLogout = () => {
    logout().then(() => {
        router.replace({ name: 'Login' })
    })
}

const gotoOrder = () => {
    router.push({
        name: 'OrderHome'
    })
}
const gotoIndex = () => {
    router.push({
        name: 'ShopHome'
    })
}

</script>

<style lang="scss" scoped>
.light-style {
    color: #ffffff;
    background-color: #222222;
}

.title-style {
    background: linear-gradient(180deg, rgba(#000000, 1), rgba(#000000, 0.2));
}
</style>
